<template>
	<view class="gift-list">
    <div class="gift-item" v-for="item in giftList" :key="item.id" @click="giftDetail(item)">
      <u-image :src="item.gift.image" :width="240" :height="240" mode="aspectFit"></u-image>
      <div class="goods-detail">
        <div class="goods-price-box">
          <div class="goods-name">{{ item.gift.name }}</div>
          <div class="goods-price">已领取：{{ item.gift.sale_count }}</div>
        </div>
        <div class="goods-price-box">
          <div class="goods-name">{{ item.is_get=== 0 ? '已领取' : '待领取' }}</div>
          <div style="color: #007aff" class="goods-price" v-if="item.is_get === 1">去领取 ></div>
        </div>
      </div>
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        giftList: []
			};
		},
    methods: {
      giftDetail(item) {
        uni.navigateTo({
          url: `/pages/gift/detail?id=${item.id}`
        })
      }
    },
    onShow() {
      this.$api.giftList({
        member_id: uni.getStorageSync('userInfo').id
      }).then(res => {
        this.giftList = res.map(el => {
          return {
            ...el,
            gift: {
              ...el.gift,
              image: this.$baseUrl + el.gift.image
            }
          }
        })
      })
    }
	}
</script>

<style lang="scss" scoped>
.gift-list {
  background-color: #f7f8fa;
  height: 100%;
  overflow: auto;
}
.gift-item {
  display: flex;
  background-color: #FFFFFF;
  padding:14px;
  margin-bottom: 10px;
  .goods-detail{
    flex-grow: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .goods-price-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
}
</style>
